<!DOCTYPE html>

<html>

    <head>
        <title>PageDown Demo Page</title>
        
        <link rel="stylesheet" type="text/css" href="demo.css" />
		<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/black-tie/jquery-ui.css" type="text/css" />
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js" type="text/javascript"></script>        
        <script type="text/javascript" src="../../Markdown.Converter.js"></script>
        <script type="text/javascript" src="../../Markdown.Sanitizer.js"></script>
        <script type="text/javascript" src="../../Markdown.Editor.js"></script>
    </head>
    
    <body>
    	<input name="foo:bar" />
    	<img src="http://www.peavey.com/news/includes/images/fullsize/619.jpg" /><br/>
    	<a class="drag" target="_blank" href="http://www.peavey.com/news/includes/images/fullsize/619.jpg">I'm an anchor tag pointing to an image</a><br/>
    	<a target="_blank" href="http://www.peavey.com/">I'm an anchor tag pointing to a website</a>
        <div class="wmd-panel">
            <div id="wmd-button-bar"></div>
            <textarea class="wmd-input" id="wmd-input">
This is the *first* editor.
------------------------------

Just plain **Markdown**, except that the input is sanitized:

<marquee>I'm the ghost from the past!</marquee>
</textarea>
        </div>
        <div id="wmd-preview" class="wmd-panel wmd-preview"></div>
        
        <br /> <br />
        
        <div class="wmd-panel">
            <div id="wmd-button-bar-second"></div>
            <textarea class="wmd-input" id="wmd-input-second">
This is the *second* editor.
------------------------------

It has a plugin hook registered that surrounds all words starting with the
letter A with asterisks before doing the Markdown conversion. Another one gives bare links
a nicer link text. User input isn't sanitized here:

<marquee>I'm the ghost from the past!</marquee>

http://google.com

http://stackoverflow.com

It also includes a help button.
</textarea>
        </div>
        <div id="wmd-preview-second" class="wmd-panel wmd-preview"></div>

<!-- ((?!https?:\/\/)([a-zA-Z0-9\-\.]+\.(com|org|net|mil|edu|COM|ORG|NET|MIL|EDU))) -->
        <script type="text/javascript">
            (function () {
				function insertAtCaret(areaId,text) {
					var txtarea = document.getElementById(areaId);
					var scrollPos = txtarea.scrollTop;
					var strPos = 0;
					var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ? 
						"ff" : (document.selection ? "ie" : false ) );
					if (br == "ie") { 
						txtarea.focus();
						var range = document.selection.createRange();
						range.moveStart ('character', -txtarea.value.length);
						strPos = range.text.length;
					}
					else if (br == "ff") strPos = txtarea.selectionStart;
					
					var front = (txtarea.value).substring(0,strPos);  
					var back = (txtarea.value).substring(strPos,txtarea.value.length); 
					txtarea.value=front+text+back;
					strPos = strPos + text.length;
					if (br == "ie") { 
						txtarea.focus();
						var range = document.selection.createRange();
						range.moveStart ('character', -txtarea.value.length);
						range.moveStart ('character', strPos);
						range.moveEnd ('character', 0);
						range.select();
					}
					else if (br == "ff") {
						txtarea.selectionStart = strPos;
						txtarea.selectionEnd = strPos;
						txtarea.focus();
					}
					txtarea.scrollTop = scrollPos;
				}
            	
            	// custom basic tag whitelist, added a and iframe tags
			    var basic_tag_whitelist = /^(<\/?(a|iframe|b|blockquote|code|del|dd|dl|dt|em|h1|h2|h3|i|kbd|li|ol|p|pre|s|sup|sub|strong|strike|ul)>|<(br|hr)\s?\/?>)$/i;
			    
			    // <a href="url..." optional title  optional target
			    var a_white = /^(<a\shref="((https?|ftp):\/\/|\/)[-A-Za-z0-9+&@#\/%?=~_|!:,.;\(\)]+"(\stitle="[^"<>]+")?(\starget="[^"<>]+")?\s?>|<\/a>)$/i;
			
			    // <img src="url..." optional width  optional height  optional alt  optional title
			    var img_white = /^(<img\ssrc="(https?:\/\/|\/)[-A-Za-z0-9+&@#\/%?=~_|!:,.;\(\)]+"(\swidth="\d{1,3}")?(\sheight="\d{1,3}")?(\salt="[^"<>]*")?(\stitle="[^"<>]*")?(\sstyle="[^"<>]*")?\s?\/?>)$/i;
                
                var converter1 = Markdown.getSanitizingConverter(basic_tag_whitelist,a_white,img_white);
                var editor1 = new Markdown.Editor(converter1);
                
                // add http:// to links that are missing it.
                converter1.hooks.chain("preConversion", function (text) {
                	return text.replace(/\s((?!https?:\/\/)([a-zA-Z0-9\-\.]+\.(com|org|net|mil|edu|COM|ORG|NET|MIL|EDU)))\b/gi, " http://$1").replace("###","\###");
                });
                
                // convert anchor tags pointing to images to images floated right
                // append a clear float div at end
                converter1.hooks.chain("postConversion", function (text) {
                	return text.replace(/(<a\shref="(((https?|ftp):\/\/|\/)[-A-Za-z0-9+&@#\/%?=~_|!:,.;\(\)]+\.(jpg|gif|png))"(\stitle="[^"<>]+")?(\starget="[^"<>]+")?\s?>(.*)<\/a>)/ig,function(){
                		return "<img src=\"" + arguments[2] + "\" style=\"float: right; margin: 5px;\" \/>";
                	}) + "<div style=\"clear: both;\"><\/div>";
                });
                
                editor1.hooks.set("insertImageDialog", function (callback) {
                	var content = $("<div>Please paste the image url below:<br><input type='text' class='imgUrl' /></div>");
                	var inp = content.find('input');
                	$("<div />").append(content).dialog({
                		buttons: {
                			"Ok": function () {
                				var url = inp.val();
                				callback(null);
		            			insertAtCaret('wmd-input',"![image](" + url + ")[float: right;margin: 5px;]");
		            			editor1.refreshPreview();
		            			$(this).remove();
                			},
                			"Cancel": function () {
                				callback(null);
                				$(this).remove();
                			}
                		},
                		title: "Insert Image"
                	});
                	return true;
                });
                
                editor1.run();

            	$('a.drag').draggable({
            		revert: true
            	});
            	$('#wmd-input').droppable({
            		drop: function( event, ui ) {
            			var url = ui.draggable[0].href, text = ui.draggable.text();
            			insertAtCaret('wmd-input',"![" + text + "](" + ui.draggable[0].href + ")[float: right;margin: 5px;]");
            			editor1.refreshPreview();
            		}
            	})

                var converter2 = new Markdown.Converter();

                converter2.hooks.chain("preConversion", function (text) {
                    return text.replace(/\b(a\w*)/gi, "*$1*");
                });

                converter2.hooks.chain("plainLinkText", function (url) {
                    return "This is a link to " + url.replace(/^https?:\/\//, "");
                });
                
                var help = function () { alert("Do you need help?"); }
                
                var editor2 = new Markdown.Editor(converter2, "-second", { handler: help });
                
                editor2.run();
            })();
        </script>
    </body>
</html>
